<style lang="scss" scoped>
	.phome{
		@include n-col1;
		align-items: stretch;
		
		.phome-list{
			height: 0;
			flex: 1;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			grid-auto-rows: 200px;
			gap:30px;
			>li{
				border-radius: 20px;
				background: $theme-bg-white1;
				
			}
			.phome-list-ad{
				grid-column-end: span 3;
				@include n-row1;
				padding: 0 30px;
				gap:30px;
				>article{
					padding-left: 20px;
					flex: 1;
					width: 0;
					>h3{
						font-size: 22px;
						color: $theme-text2;
						line-height: 1.6;
					}
					>p{
						font-size: 16px;
						color: $theme-text5;
						line-height: 1.6;
						margin-top: 15px;
					}
				}
				>img{
					display: block;
					height: 100%;
				}
			}
			.phome-list-chart{
				padding: 30px;
				@include n-col2;
				align-items: flex-start;
				>p{
					font-size: 14px;
					color: $theme-text5;
					line-height: 1;
				}
				>h3{
					font-size: 42px;
					margin-top: 30px;
					color: $theme-text2;
					line-height: 1;
				}
				>h4{
					font-size: 14px;
					margin-top: 5px;
					color: var(--theme-green);
					line-height: 1;
				}
				>h5{
					font-size: 13px;
					margin-top: 20px;
					color: $theme-text6;
				}
			}
			.phome-list-card{
				padding: 30px;
				@include n-col2;
				align-items: flex-start;
				>img{
					height: 40px;
				}
				>h3{
					margin-top: 30px;
					font-size: 18px;
					color: $theme-text2;
					line-height: 1;
				}
				>p{
					font-size: 13px;
					margin-top: 17px;
					color: $theme-text5;
					line-height: 1;
				}
			}
		}
	}
	
</style>

<template>
	<div class="n-page phome" v-loading="loading">
		<h1 class="n-page-h1">
			<em>{{ $route.meta.title }}</em>
<!--			<el-button icon="el-icon-plus" type="primary" >添加文件夹</el-button>-->
		</h1>
		<ul class="phome-list">
			 
			<li class="phome-list-ad">
				<article>
					<h3>大数据获客工具</h3>
					<p>智脑云拓，您的专业营销专家。</p>
				</article>
				<img src="@/assets/img/11.png" />
			</li>
			<li class="phome-list-chart">
				<p>本周新增用户</p>
				<h3>20</h3>
				<h4>用户+3</h4>
				<h5>较上个月用户+8</h5>
			</li>
			
			<li class="phome-list-card">
				<img style="filter:  hue-rotate(200deg);" src="@/assets/img/10.png" />
				<h3>88765</h3>
				<p>可获取用户数</p>
			</li>
			<li class="phome-list-card">
				<img src="@/assets/img/10.png" />
				<h3>1234231</h3>
				<p>线索数量</p>
			</li>
			<li class="phome-list-card">
				<img style="filter:  hue-rotate(160deg);" src="@/assets/img/10.png" />
				<h3>50</h3>
				<p>用户数</p>
			</li>
			<li class="phome-list-card">
				<img style="filter:  hue-rotate(50deg);" src="@/assets/img/10.png" />
				<h3>20</h3>
				<p>代理商数</p>
			</li>
			 
		</ul>
		
		
		
	</div>
</template>

<script>
	export default {
		data(){
			return{
				loading:false,
			}
		},
		mounted(){
		 
		},
		beforeDestroy(){
		}
	}
	
	
</script>